<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #app>ul>li>select{
            width: 100px;
        } */
    </style>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="(item,index) in arr">
               车系:{{item.brand}}&emsp;&emsp;
               车型:{{item.series}}&emsp;&emsp;
               年份:{{item.creation}}&emsp;&emsp;
        </li>
       </ul>
        <button>查找</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var arr = [
                {
                    brand: "奥迪",
                    series: "奥迪A4",
                    creation: "2021"
                },
                {
                    brand: "奥迪",
                    series: "奥迪A6",
                    creation: "2020"
                },
                {
                    brand: "宝马",
                    series: "宝马A3",
                    creation: "2020"
                },
                {
                    brand: "保时捷",
                    series: "保时捷911",
                    creation: "2020"
                },
                ];
        new Vue({
            count:0,
            el:"#app",
            data:{
               arr,
                },
                methods:{
                    select(item,index){

                    }
                }
                // watch:{
                // userInfo: {
                //     // 开启深度监听 
                //     deep: true,
                //     handler(newValue, oldValue) {
                //         console.log(newValue)
                //     }
                // }
                //}
        })
    </script>
</body>
</html>